<template>
  <div class="music-body">
    <div class="group-box">
      <div class="left-part">
        <div class="select-sort">华语</div>
        <div class="select-box iconfont icon-arrow-down">选择分类</div>
      </div>
      <div class="right-tag"><a>热门</a></div>
    </div>
    <!--展示具体的内容-->
    <div class="music-container">
      <ul>
        <li
          v-for="(item, index) in targetPageList"
          :key="index"
          @click="navToPage(item.id)"
        >
          <div
            class="music-item"
            :style="'background-image:url(' + item.coverImgUrl + ')'"
          >
            <div class="music-bottom">
              <div class="play-count iconfont icon-listen">
                {{ item.playCount }}
              </div>
              <div class="iconfont icon-play"></div>
            </div>
          </div>
          <div class="music-name">
            <a>{{ item.name }}</a>
          </div>
          <div class="music-author">
            <span class="author-tag">by</span
            ><span class="author-name"
              ><a>{{ item.creator.nickname }}</a
              ><img
                alt=""
                :class="
                  item.creator.avatarDetail != undefined &&
                  item.creator.avatarDetail != null &&
                  item.creator.avatarDetail.identityIconUrl != undefined
                    ? 'author-icon'
                    : 'hide-author-icon'
                "
                :src="
                  item.creator.avatarDetail != undefined &&
                  item.creator.avatarDetail != null &&
                  item.creator.avatarDetail.identityIconUrl != undefined
                    ? item.creator.avatarDetail.identityIconUrl
                    : ''
                "
            /></span>
          </div>
        </li>
      </ul>
      <div
        :class="'quick-bar' + (showQuickbar ? ' show-bar' : '')"
        @click="navToTop"
      >
        <div class="iconfont icon-arrow-top"></div>
        <div>TOP</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, reactive, ref } from "vue";
import router from "../router";
let targetPageList = reactive(new Array());
let showQuickbar = ref(true);
function watchScroll() {
  let scrollTop =
    window.pageYOffset ||
    document.documentElement.scrollTop ||
    document.body.scrollTop;
  if (scrollTop > 50) showQuickbar.value = true;
  else showQuickbar.value = false;
}
function navToPage(id) {
  router.push("/detail?id=" + id);
}
function navToTop() {
  document.documentElement.scrollTop = "0px";
  showQuickbar.value = false;
}
onMounted(async () => {
  const resultList = (
    await fetch("http://122.112.161.135:3000/top/playlist?cat=华语").then(
      (data) => data.json()
    )
  ).playlists;
  for (let i = 0; i < 35; i++) {
    if (resultList[i].playCount > 10000)
      resultList[i].playCount =
        parseInt(resultList[i].playCount / 10000) + "万";
    targetPageList.push(resultList[i]);
  }
  console.log("输出数据：", targetPageList);
  window.addEventListener("scroll", watchScroll);
});
</script>
<style>
@import "../assets/css/music-list.css";
</style>
